<template>
  <div class="timeSwichBox">
    <div class="item" :class="{ 'board-border-min': item.active }" v-for="(item, index) in timeSwichList" :key="index" @click="clickHandle(item, index)">
      <span>{{ item.label }}</span>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
// import api from '@/api/userConfig';
// import { RepairType } from '@/unit/constantValue';
import '@assets/styles/publicStyle/index.less';

import { createNamespacedHelpers } from 'vuex';
const { mapMutations } = createNamespacedHelpers('board/');

const timeSwichList = [
  {
    label: '七天',
    value: '1',
    active: true,
  },
  {
    label: '本月',
    value: '2',
    active: false,
  },
  {
    label: '最近半年',
    value: '3',
    active: false,
  },
  {
    label: '今年',
    value: '4',
    active: false,
  },
];

function getTime(value) {
  let startTime = '';
  let endTime = '';

  switch (parseInt(value)) {
    case 1:
      return {
        startTime: `${moment()
          .subtract(7, 'days')
          .format('YYYY-MM-DD')} 00:00:00`,
        endTime: `${moment()
          .subtract(1, 'days')
          .format('YYYY-MM-DD')} 23:59:59`,
      };
    case 2:
      return {
        startTime: `${moment()
          .startOf('month')
          .format('YYYY-MM-DD')} 00:00:00`,
        endTime: `${moment()
          .endOf('month')
          .format('YYYY-MM-DD')} 23:59:59`,
      };
    case 3:
      return {
        startTime: `${moment()
          .month(moment().month() - 5)
          .startOf('month')
          .format('YYYY-MM-DD')} 00:00:00`,
        endTime: `${moment()
          .month(moment().month() - 0)
          .endOf('month')
          .format('YYYY-MM-DD')} 23:59:59`,
      };
    case 4:
      return {
        startTime: `${moment()
          .startOf('year')
          .format('YYYY-MM-DD')} 00:00:00`,
        endTime: `${moment()
          .endOf('year')
          .format('YYYY-MM-DD')} 23:59:59`,
      };
    default:
      break;
  }
}

export default {
  name: 'timeSwich',
  components: {},
  props: {},
  data() {
    return {
      timeSwichList,
      startTime: `${moment()
        .subtract(7, 'days')
        .format('YYYY-MM-DD')} 00:00:00`,
      endTime: `${moment()
        .subtract(1, 'days')
        .format('YYYY-MM-DD')} 23:59:59`,
    };
  },
  methods: {
    ...mapMutations(['timeSwichHandle']),
    clickHandle(item, index) {
      let { value, active } = item;
      timeSwichList.forEach((obj, i) => {
        if (index == i) {
          obj.active = true;
        } else {
          obj.active = false;
        }
      });

      // getTime(value);
      // this.$store.commit('timeSwichHandle', 10);
      this.timeSwichHandle(getTime(value));
    },
    initTimeRange() {
      let obj = timeSwichList.filter((item) => item.active);
      let value = getTime(obj[0].value);
      console.log(value);
      this.timeSwichHandle(value);
    },
  },
  created() {},
  mounted() {
    this.initTimeRange();
  },
  computed: {},
};
</script>

<style scoped="scoped" lang="less">
@import './style.less';
</style>
